<template>
  <div class="index-middle" v-cloak>
    <div  class="post-preview mt20 mb30"
          v-if="!detailFlag"
          v-for="item in postIndex"
          :key="item.postId">
      <div class="post-time">{{changeTimeStamp(item.time)}}</div>
      <div class="post-info" >
        <a href="#">
            <span @click="toDetail(item)">
                {{item.title}}
            </span>
        </a>
        <p>
          <a class="tag" href="/tags/#javascript" title="javascript" v-for="(elem, index) in item.tags" :key="index">/ {{elem}} </a>
        </p>
      </div>
    </div>
    <div class="post-preview-footer" v-show="!detailFlag">
      <div class="post-previous-page post-btn" v-show="previousPageFlag" @click="previousPagePost">PREVIOUS</div>
      <div class="post-next-page post-btn" @click="nextPagePost">NEXT</div>
    </div>
    <post-detail v-if="detailFlag" :post-info = "singlePostInfo"></post-detail>
  </div>
</template>
<script>
import { timeStampChange } from '@/components/common/commonMethonds'
import postDetail from '@/components/pages/postDetail'
export default {
  name: 'Save',
  data() {
    return {
      // 博文数组
      postIndex: [],
      // 显示detail flag
      detailFlag: false,

      // 点击文章的详情info
      singlePostInfo: {},
      // 当前page页
      currentPage: 1
    }
  },
  components: {
    postDetail
  },
  computed: {
    // 上一页显示 flag
    previousPageFlag () {
      return this.currentPage !== 1
    }
  },
  mounted() {
    // 获取初始化数据
    this.getInitInfo()
  },
  methods: {
    getInitInfo() {
      // 默认获取第一页数据
      this.$post('/post-page', {
        page: 1
      })
        .then((response) => {
          this.getAfterTidyInfo(response.data)
        })
    },
    // 获取博文数据 数据整理
    getAfterTidyInfo(data) {
      this.postIndex = data
      // this.postIndex.tags = this.postIndex.tags.split(',')
      this.postIndex.forEach((elem, index) => {
        elem.tags = elem.tags.split(',')
      })
    },
    // 显示详情文章
    toDetail(val) {
      this.detailFlag = true
      this.singlePostInfo = val
    },
    // 下一页
    nextPagePost() {
      const params = {
        page: this.currentPage + 1
      }
      this.currentPage += 1
      this.$post('/post-page', params)
        .then((response) => {
          this.getAfterTidyInfo(response.data)
        })
    },
    // 上一页
    previousPagePost() {
      const params = {
        page: this.currentPage - 1
      }
      this.currentPage -= 1
      this.$post('/post-page', params)
        .then((response) => {
          this.getAfterTidyInfo(response.data)
        })
    },
    changeTimeStamp(time) {
      return timeStampChange(parseInt(time))
    }
  }
}
</script>
<style lang="less" scoped>
  .index-middle{
    width: 100%;
    min-height: 576px;
    .post-preview {
      width: 100%;
      height: max-content;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      .post-time {
        font-size: 17px;
        color: #999999;
        width: 185px;
        font-weight: 300;
        line-height: 24px;
        text-align: center;
      }
      .post-info {
        flex: 1;
        a {
          cursor: pointer;
          text-decoration: none;
          span{
            line-height: 24px;
            cursor: pointer;
            margin-top: 0;
            color: #101010;
            font-size: 18px;
            font-weight: 300;
            transition: color 0.4s;
          }
        }
        p{
          margin-top: 0;
          span{
            font-weight: 300;
            color: #999999;
            font-size: 14px;
            text-decoration: none;
          }
          a{
            font-weight: 300;
            color: #999999;
            font-size: 14px;
            text-decoration: none;
          }
        }
      }
    }
    .post-preview-footer{
      width: 100%;
      height: 40px;
      position: relative;
      .post-btn{
        width: 90px;
        line-height: 30px;
        border: 1px solid #999999;
        text-align: center;
        position: absolute;
        -webkit-transition-property: background-color;
        -webkit-transition-duration: 0.5s;
        -webkit-transition-timing-function: ease;
      }
      .post-next-page{
        right: 20px;
      }
      .post-previous-page{
        right: 130px;
      }
      .post-btn:hover{
        cursor:pointer;
        background-color: #efefee;
      }
    }
  }
</style>

